<template>
    <div class="container_general">
        <!-- 轮播图 -->
        <!-- <el-carousel height="220px">
            <el-carousel-item v-for="item in 4" :key="item">
            </el-carousel-item>
        </el-carousel> -->
        <!-- 导航栏 -->
        <div class="navBar_general">
            <!-- <div class="navBar_top">
                <div class="navBar_top_left">图表类型:</div>
                <div class="navBar_top_right">
                    <div class="items" v-for="(item, index) in chartList" :key="index"
                        :class="{ 'is_active': queryParams.chartType === index }" @click="changeChartType(index)">{{ item }}
                    </div>
                </div>
            </div> -->
            <div class="navBar_bottom">
                <div class="navBar_top_left">绘图类型:</div>
                <div class="navBar_top_right">
                    <div class="items draw_type" v-for="item in productList" :key="item.id"
                        :class="{ 'is_active': queryParams.typeId === item.id }" @click="changedrawType(item.id)">{{
                            item.name }}</div>
                </div>
            </div>
        </div>
        <!-- 筛选框 -->
        <div class="screen_general">
            <div class="screen_general_left">
                <div class="items" :class="{ 'is_active': queryParams.searchType === 'hot' }" @click="changeType('hot')">
                    <i class="icon_hot"></i>
                    <span>最热图表</span>
                </div>
                <div class="items" :class="{ 'is_active': queryParams.searchType === 'new' }" @click="changeType('new')">
                    <i class="icon_new"></i>
                    <span>最新更新</span>
                </div>
            </div>
            <div class="screen_general_right">
                <!-- <el-popover placement="bottom" width="300" trigger="hover" popper-class="popover_content">
                    <div>
                        <span class="title">最新使用图表</span>
                        <div class="items_content">
                            <div class="items" v-for="item in 4" :key="item">
                           {{ item }}
                        </div>
                        </div>
                    </div> -->
                <el-input placeholder="请输入搜索内容" v-model="queryParams.keywrod" slot="reference"
                    @keydown.enter.native="getList">
                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                </el-input>
                <!-- </el-popover> -->
                <el-button searchType="primary" class="primary_item" @click="getList">搜索</el-button>
            </div>
        </div>
        <!-- 内容展示 -->
        <div class="content_general">
            <template v-for="item in drawToolList">
                <el-popover placement="right" trigger="hover" v-if="item.tips">
                    <div class="content_general_tips">
                        <div>图绘说明：</div>
                        <div>{{ item.tips }}</div>
                    </div>
                    <div class="content_general_item" @click="$skipRouter('chartOverview', item.visitAddress)"
                        slot="reference">
                        <div class="content_general_item_title">{{ item.pageName }}</div>
                        <div class="content_general_item_pic">
                            <el-image :src="item.picUrl" lazy></el-image>
                            <!-- <img :src="item.picUrl"> -->
                        </div>
                        <div class="content_general_item_author">
                            <span>Author:</span>
                            <span class="content_general_item_author_content">
                                {{ hyposensitization(item.userName) }}
                            </span>
                        </div>
                        <div class="content_general_item_date">
                            <span>Last update:</span>
                            <span class="content_general_item_author_content">{{ item.publishTime }}</span>
                        </div>
                        <div class="content_general_item_drawCount">
                            <span>Usage Counter:</span>
                            <span class="content_general_item_author_content">{{ item.drawCount }}</span>
                        </div>
                    </div>
                </el-popover>
                <div class="content_general_item" @click="$skipRouter('chartOverview', item.visitAddress)" v-else>
                    <div class="content_general_item_title">{{ item.pageName }}</div>
                    <div class="content_general_item_pic">
                        <el-image :src="item.picUrl" lazy></el-image>
                        <!-- <img :src="item.picUrl"> -->
                    </div>
                    <div class="content_general_item_author">
                        <span>Author:</span>
                        <span class="content_general_item_author_content">{{ hyposensitization(item.userName) }}</span>
                    </div>
                    <div class="content_general_item_date">
                        <span>Last update:</span>
                        <span class="content_general_item_author_content">{{ item.publishTime }}</span>
                    </div>
                    <div class="content_general_item_drawCount">
                        <span>Usage Counter:</span>
                        <span class="content_general_item_author_content">{{ item.drawCount }}</span>
                    </div>
                </div>
            </template>

            <div class="content_general_btn" v-if="flag" @click="toTop">
                <i class="el-icon-caret-top"> </i>
            </div>
        </div>
    </div>
</template>

<script>
import { Loading } from 'element-ui';
import { getDrawTypeListRequest, getDrawToolListRequest } from '@/api/tools'
export default {
    name: 'BaiaoweifanUiIndex',
    data() {
        return {
            // chartList: ['全部', '热图', '降维分析', '箱线图', '关系图', '韦恩图', '密度图', '富集分析', '柱状图', '散点图', '面积图', '饼状图', '折线图', '树状图', '桑基图', '词云图', '注释类', 'Circos图', '差异分析'],
            productList: [],
            queryParams: {
                // chartType: 0, 
                typeId: '',
                searchType: 'hot',
                keywrod: null,
            },
            drawToolList: [],
            ip: null,
            port: null,
            options: {
                background: 'rgba(255,255,255,0.1)',
                target: '.content_general',
                text: '努力加载数据中,请稍后....'
            },
            flag: false
        };
    },
    created() {
        this.init()
        this.getList()
        this.$skipRouter('chartOverview', 'chartOverview')
    },
    mounted() {
        const scrollBox = document.querySelector('.content_general')
        scrollBox.addEventListener('scroll', this.showBtn)
    },

    methods: {
        showBtn(e) {
            const top = document.querySelector('.content_general').scrollTop
            this.flag = top > 1000 ? true : false
        },
        toTop() {
            document.querySelector('.content_general').scrollTop = 0
        },
        async init() {
            this.ip = process.env.VUE_APP_IP
            this.port = process.env.VUE_APP_PORT
            const res = await getDrawTypeListRequest()
            if (res.code !== 200) return this.$message.error(res.message)
            this.productList = res.data
        },
        async getList() {
            let loadingInstance = Loading.service(this.options)
            const res = await getDrawToolListRequest(this.queryParams)
            if (res.code !== 200) {
                this.$message.error(res.message)
            } else {
                this.drawToolList = res.data
            }
            loadingInstance.close();
        },
        // changeChartType(index) {
        //     this.queryParams.chartType = index
        // },
        changedrawType(id) {
            this.queryParams.typeId = id
            this.getList()
        },
        changeType(value) {
            this.queryParams.searchType = value
            this.getList()
        },
        hyposensitization(item) {
            if (item && item.length == 11) {
                return item.substring(0, 3) + '****' + item.substring(item.length - 4, item.length)
            } else {
                return item
            }
        },
    },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";

.container_general {
    position: relative;
}

.navBar_general {
    padding: 25px;
    width: 100%;

    // box-shadow: 2px 2px 6px #666;
    .navBar_top,
    .navBar_bottom {
        display: flex;
        align-content: flex-start;

        .navBar_top_left {
            width: 80px;
            line-height: 28px;
            font-weight: 700;
        }

        .navBar_top_right {
            flex: 1;
            display: flex;
            flex-wrap: wrap;

            .items {
                // width: 78px;
                padding: 0 10px;
                height: 30px;
                line-height: 30px;
                // font-size: 12px;
                margin-bottom: 15px;
                cursor: pointer;
                text-align: center;

                // &.draw_type {
                //     display: inline-block;
                //     white-space: nowrap;
                // }

                &.is_active {
                    background-color: $themeTopToolColor;
                    color: #fff;
                    border-radius: 3px;
                }
            }
        }
    }
}

.screen_general {
    width: 100%;
    padding-right: 25px;
    display: flex;
    justify-content: space-between;

    .screen_general_left {
        display: flex;

        .items {
            margin-left: 20px;
            cursor: pointer;
            display: flex;
            align-items: center;

            .icon_hot,
            .icon_new {
                display: inline-block;
                width: 20px;
                height: 20px;
                background: url(../../assets/hot.png) no-repeat;
                background-size: 20px;
            }

            .icon_new {
                background: url(../../assets/new_type.png) no-repeat;
                background-size: 20px;
            }

            &.is_active {
                font-weight: 700;
                color: $themeTopToolColor;
            }
        }
    }
}

.screen_general_right {
    position: relative;

    ::v-deep .el-button--primary {
        background-color: transparent !important;
        color: $themeTopToolColor !important;
    }

    .primary_item {
        position: absolute;
        top: 50%;
        right: 5px;
        transform: translateY(-50%);
        background-color: transparent;
        color: $themeTopToolColor;
        font-weight: 700;
        border: 0;
    }

    ::v-deep .el-input {
        width: 300px;

        .el-input__inner {
            // width: 100%;
            height: 35px;
            line-height: 35px;
            border-radius: 3px;
        }
    }


}

.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
}

.el-carousel__item {
    border-radius: 3px;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
}

.popover_content {
    .title {
        font-size: 14px;
        // color: red;
    }

    .items_content {
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;

        .items {
            cursor: pointer;
            padding: 0 15px;
            background-color: red;
            margin-right: 15px;
        }
    }

    // background-color: red;
}

.content_general {
    // position: relative;
    margin-top: 25px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 25px 0 0 3%;
    height: calc(100vh - 220px);
    overflow-y: auto;
    font-size: 14px;
    color: #333;

    // background-color: red;
    .content_general_btn {
        cursor: pointer;
        position: absolute;
        bottom: 50px;
        right: 100px;
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        border-radius: 20px;
        font-size: 25px;
        box-shadow: 0 0 3px 2px #d7d2d2;
        background-color: #fff;
    }

    .content_general_item {
        // width: 100%;
        width: 270px;
        height: 380px;
        box-shadow: 0 0 20px 5px #d7d2d2;
        border-radius: 10px;
        margin: 0 25px 25px 0;
        display: flex;
        flex-direction: column;
        padding: 25px 15px;
        cursor: pointer;
        border: 1px solid transparent;
        transform: scale(0.9);
        position: relative;

        // background-color: red;
        &:hover {
            border: 1px solid #ccc;
            transform: scale(1.1);
        }

        .content_general_item_title {
            text-align: center;
            font-weight: 700;
            font-size: 20px;
            width: 100%;
            overflow: hidden;
            text-wrap: nowrap;
            padding-bottom: 10px;
        }

        .content_general_item_author {
            margin-top: 20px;
        }

        .content_general_item_date {
            margin: 20px 0;
        }

        .content_general_item_pic {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 220px;
            width: 100%;
            overflow: hidden;

            img {
                height: 100%;
            }
        }

        .content_general_item_author_content {
            margin-left: 5px;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        }

    }
}
</style>
<style >
.content_general_tips {
    /* height: 100px; */
    max-width: 200px;
}
</style>